<template>
    <div class="flow-white-list">
        <div class="zh-table">
            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table
                    :data="listData"
                    fixed
                    border
                    max-height="600"
                    style="width: 100%">
                    <el-table-column
                        prop="ip"
                        label="ip地址"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="ts"
                        label="时间"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        :width="80">
                        <template slot-scope="scope">
                            <el-button @click="handleRowConfirm(scope.row.id)" type="text">取消白名单</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            listData: [], // 提醒列表
            loading: {
                status: false, // 是否显示 loading
                txt: '获取数据...' // loading 标题
            },
        }
    },
    created() {
        this.getList();
    },
    methods: {
        /**
         * 获取白名单列表
         */
        getList() {
            this.loading.status = true;

            let success = (res=>{
                this.loading.status = false;
                this.listData = res.data;
            })

            this.$ajax.get('api/stream/whitelist', {func: {success: success}})
        },
        /**
         * 处理数据
         * @param {Number/Array} 要处理数据的 id
         */
        handleRowConfirm(id) {
            let that = this;
            let yes = (res => {
                that.loading.status = true;

                let success = (res => {
                    that.loading.status = false;
                    that.$message.success(res.msg);

                    that.getList();
                });
                let fail = (res =>{
                    that.$message.error(res.msg);

                    that.getList();
                })
                let params = {
                    ip
                }

                that.$ajax.delete('api/stream/whitelist', {params, func: {success: success, fail: fail}})
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '是否取消白名单'});
        },
    },
}
</script>

<style lang="scss">
.flow-white-list {
    
}
</style>